<f:view>
    <h:outputText value="Account Log In" style="font-size: 20px; font-weight: bold;"/>
    <h:form>
        <rich:messages globalOnly="true" style="color: red" styleClass="errorMessage" />
        <h:panelGrid columns="3">
            <h:outputText value="(*) Email:" />
            <h:inputText id="email" maxlength="50" value="#{loginBean.email}" size="30" required="true" requiredMessage="The email is required" />
            <h:message  for="email" style="color: red" styleClass="errorMessage"/>
            
            <h:outputText value="(*) Password:" />
            <h:inputSecret id="password" value="#{loginBean.password}" redisplay="false" required="true" requiredMessage="The password is required"/>
            <h:message  for="password" style="color: red" styleClass="errorMessage"/>    
            
            <h:commandButton id="login" value="Log In" action="#{loginBean.login}" />
            <h:outputLink value="/site/faces/signUp.jsp" target="_blank">
                <h:outputText value="SignUp" />
            </h:outputLink>
        </h:panelGrid>
    </h:form>
    <h:form>
        <h:panelGrid>
            <h:outputLink value="/site/faces/recoveryPassword.jsp" target="_blank">
                <h:outputText value="Forgot your Password?" />
            </h:outputLink>
            <h:outputLink value="/site/faces/welcome.jsp" >
                <h:outputText value="Go to Welcome Page" />
            </h:outputLink>
        </h:panelGrid>
    </h:form>
    <rich:separator height="1" />
</f:view>